<template>
    <nav class="top-navbar">
      <div class="container">
        <div class="navbar-brand">
          <slot name="brand">
            <span class="logo">B楼导航</span>
          </slot>
        </div>
        
        <!-- 移动端菜单按钮 -->
        <button class="mobile-menu-button" @click="toggleMenu">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        
        <!-- 导航链接 -->
        <ul class="navbar-links" :class="{ 'show': isMenuOpen }">
          <li v-for="(link, index) in links" :key="index">
            <a :href="link.url" @click="closeMenu">{{ link.text }}</a>
          </li>
        </ul>
        
        <!-- 操作按钮 -->
        <div class="navbar-actions" :class="{ 'show': isMenuOpen }">
          <slot name="actions" @click="closeMenu"></slot>
        </div>
      </div>
    </nav>
  </template>
  
  <script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue'
  
  const props = defineProps({
    links: {
      type: Array,
      default: () => [
        { text: '首页', url: '/' },
        { text: '产品', url: '/products' },
        { text: '关于', url: '/about' },
        { text: '联系', url: '/contact' }
      ]
    },
    breakpoint: {
      type: Number,
      default: 768 // 移动端和桌面端的切换断点(px)
    }
  })
  
  const isMenuOpen = ref(false)
  const isMobile = ref(false)
  
  const toggleMenu = () => {
    isMenuOpen.value = !isMenuOpen.value
  }
  
  const closeMenu = () => {
    if (isMobile.value) {
      isMenuOpen.value = false
    }
  }
  
  const checkScreenSize = () => {
    isMobile.value = window.innerWidth < props.breakpoint
    if (!isMobile.value) {
      isMenuOpen.value = false
    }
  }
  
  onMounted(() => {
    checkScreenSize()
    window.addEventListener('resize', checkScreenSize)
  })
  
  onBeforeUnmount(() => {
    window.removeEventListener('resize', checkScreenSize)
  })
  </script>
  
  <style scoped>
  .top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 0.8rem 0;
    width: 100vw;
    max-width: 100%;
  }
  
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
  }
  
  .navbar-brand .logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
  }
  
  .navbar-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .navbar-links li {
    margin: 0 1rem;
  }
  
  .navbar-links a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
    padding: 0.5rem 0;
  }
  
  .navbar-links a:hover {
    color: #0066ff;
  }
  
  .navbar-actions {
    display: flex;
    gap: 0.8rem;
  }
  
  /* 移动端样式 */
  .mobile-menu-button {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
  }
  
  .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #333;
    margin: 4px 0;
    transition: all 0.3s;
  }
  
  /* 响应式设计 - 移动端 */
  @media (max-width: 768px) {
    .mobile-menu-button {
      display: block;
    }
    
    .navbar-links, .navbar-actions {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: #fff;
      flex-direction: column;
      align-items: center;
      padding: 1rem 0;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }
    
    .navbar-links.show, .navbar-actions.show {
      max-height: 500px; /* 足够高的值以容纳所有内容 */
    }
    
    .navbar-links li {
      margin: 0.5rem 0;
      width: 100%;
      text-align: center;
    }
    
    .navbar-links a {
      display: block;
      padding: 0.8rem 0;
    }
    
    .navbar-actions {
      justify-content: center;
    }
  }
  </style>
  